<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>抚乐酒吧</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .app-s-manage-main {
            height: calc(100% - 64px);
        }

        .app-s-manage-main .divTmp {
            width: 100%;
            height: 100%;
        }

        h1 {
            text-align: center;
        }

        .el-table {
            border: 1px solid #ebeef5;
        }

        .el-table th,
        .el-table td {
            border: 1px solid #ebeef5;
        }

        .el-table--border {
            border: 1px solid #ebeef5;
        }

        .el-table--border th,
        .el-table--border td {
            border: 1px solid #ebeef5;
        }

        .top-btn {
            margin: 20px 0 20px 10%;
        }

        .el-pagination {
            text-align: center;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>

<body>
<div class="app-s-manage" id="app-s-manage">
    <h1>弹幕管理</h1>
    <div class="top-btn">
        <el-button type="primary" @click="goBack">返回首页</el-button>
        <el-button type="primary" @click="addScrolling">新增弹幕</el-button>
        <el-button type="primary" @click="addParagraph">输入段落</el-button>
        <el-select v-model="queryType" placeholder="选择查询类型" style="margin-left: 10px;" @change="initData">
            <el-option label="弹幕" :value="0"></el-option>
            <el-option label="段落" :value="1"></el-option>
        </el-select>
    </div>
    <el-table :data="tableData" style="width: 80%;margin-left: 10%">
        <el-table-column prop="id" label="编号" width="180" align="center"></el-table-column>
        <el-table-column prop="content" label="弹幕内容" align="center"></el-table-column>
        <el-table-column prop="createdAt" label="操作时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next"
            :total="total">
    </el-pagination>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/manage.js"></script>
<script>
    new Vue({
        el: '#app-s-manage',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 0,
                queryType: 0
            }
        },
        created() {
            this.initData();
        },
        methods: {
            addParagraph() {
                this.$prompt('请输入段落内容', '段落输入', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType: 'textarea'
                }).then(({value}) => {
                    addScrolling({content: value, type: 1}).then(res => {
                        res = res.data;
                        if (res.code === 1) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.initData(this.currentPage);
                        } else {
                            this.$message.error('添加失败');
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            addScrolling() {
                this.$prompt('请输入弹幕内容', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    addScrolling({content: value, type: 0}).then(res => {
                        res = res.data;
                        if (res.code === 1) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.initData(this.currentPage);
                        } else {
                            this.$message.error('添加失败');
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            initData(page = 1) {
                getScrollingPage({page: page, pageSize: 10, type: this.queryType}).then(res => {
                    res = res.data;
                    if (res.code === 1) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            handleEdit(row) {
                this.$prompt('请输入弹幕内容', '编辑弹幕', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: row.content
                }).then(({value}) => {
                    editScrollingById({id: row.id, content: value}).then(res => {
                        res = res.data;
                        if (res.code === 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.initData(this.currentPage);
                        } else {
                            this.$message.error('修改失败');
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消编辑'
                    });
                });
            },
            handleDelete(row) {
                this.$confirm('确定要删除这条弹幕吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteScrollingById(row.id).then(res => {
                        res = res.data;
                        if (res.code === 1) {
                            this.initData(this.currentPage);
                            this.$message({
                                message: '删除成功~~',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('删除失败！！');
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initData(val);
            },
            goBack() {
                window.location.href = '/backend/index.html';
            }
        }
    })
</script>
</body>
</html>
